<template>
  <div class="pagination">
    <el-pagination :page-size="pageSize" :total="total" :current-page="currentPage" @current-change="handlePageChange"
      :prev-text="prevText" :next-text="nextText" :layout="layout"/>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { ElPagination } from 'element-plus';

export default defineComponent({
  name: 'Pagination',
  components: { ElPagination },
  props: {
    currentPage: { type: Number, default: 1 },
    pageSize: { type: Number, default: 10 },
    total: { type: Number, default: 0 },
    prevText: { type: String, default: '上一页' },
    nextText: { type: String, default: '下一页' },
    layout: {
      type: String as PropType<'total, prev, pager, next, jumper'>,
      default: 'total, prev, pager, next, jumper',
    },
  },
  emits: ['current-change'],
  setup(props, { emit }) {
    const handlePageChange = (currentPage: any) => {
      // 当点击分页组件时，触发该事件，将当前页码通过 emit 发送出去
      emit('current-change', currentPage);
    };

    return {
      handlePageChange,
    };
  },
});
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
}
</style>
